<template>
  <div class="my-required-course-container">
    <div class="course-list-tip">
      <img class="course-tip" src="~@assets/images/required-course-tip.png" alt="">
      <span> 请各位学员按时参加本年度专技培训学习，逾期平台将关闭学习功能！</span>
      <!--<img class="colse" src="~@assets/images/colse-tip.png" alt="">-->
    </div>
    <div class="course-list">
      <CourseItem :courseItem="item" v-for="(item,index) in list" :key="index"/>
    </div>

    <div class="load-more-data" v-if="moreFlag" @click="getList">加载更多</div>
    <div class="load-more-data" v-if="!moreFlag" >暂无更多</div>
  </div>
</template>

<script>
  import index from "./my-trainclassjs";
  export default {
    ...index
  }
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";

  .my-required-course-container {
    width: 100%;
    border-radius: $buttonRadius $buttonRadius 0 0;
  }

  /*课程列表提示*/
  .course-list-tip {
    width: 100%;
    height: 40px;
    background: rgba(255, 111, 0, 0.1);
    font-size: 14px;
    color: #FF6F00;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: $buttonRadius $buttonRadius 0 0;

    .course-tip {
    }

    span {
      width: 90%;

    }

    .colse {
      cursor: pointer;
      width: 24px;
      height: 24px;
    }

    img {
      width: 26px;
      height: 26px;
    }
  }

  .course-list {
    padding: 0 12px;
    padding-top: 12px;
    min-height: 753px;
  }

  .load-more-data  {
    font-size: 12px;
    color: #bdb9b9;
    cursor: pointer;
    background-color: #f5f5f5;
    width: 200px;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
  }
</style>
